<template>
  <div class="index">
    <div>
      <b-toast
        id="welcome"
        variant="secondary"
        toaster="b-toaster-top-center"
        title="英伦留声机"
        solid
        v-if="artist && album"
      >欢迎访问中文英伦音乐资料库，已收录{{num_artist}}位艺人，{{num_album}}张专辑，{{num_review}}篇乐评，更多功能请点击导航栏"高级搜索"链接</b-toast>
    </div>
	
	<div>
      <b-toast
        id="news"
        variant="secondary"
        toaster="b-toaster-bottom-right"
        title="新闻"
        solid
		auto-hide-delay=30000
      ><span v-for="(item,index) in newsList" :key="index">
	    {{item.date}}: {{item.content}}</br>
		</span>
	  </b-toast>
    </div>
	
    <div class="top1"></div>
    <div class="box0">
      <div
        class="content_album_new"
        v-if="albumList != undefined && albumList != null && albumList.length > 0"
      >
        <b-row align-v="top" align-h="center">
          <h5>新&nbsp;专&nbsp;辑&nbsp;推&nbsp;荐</h5>
        </b-row>
        <b-row align-v="top" align-h="center" style="padding: 5px 5px;" v-if="albumList">
          <span v-for="(item,index) in albumList" :key="index">
            <b-col cols="auto" style="padding: 5px; width: 168px">
			  <b-row align-h="left">
                <b-col cols="auto" class="text-left">
                  <span style="font-size: 12px; color: white; vertical-align:top">{{item.date}}</span>
                </b-col>
              </b-row>
              <b-row align-h="left">
                <b-col cols="auto" class="mb-2 text-left">
                  <router-link :to="{path: '/artist/'+item.artist.alias+'/album', query: {name: `${item.alias}`}}">
                    <b-img
                      thumbnail
                      fluid
                      :src="item.cover"
                      :title="item.artist.name + ' 《' + item.name + '》'"
                      class="placeholder108"
                    />
                  </router-link>
                </b-col>
              </b-row>
			  <b-row align-h="left">
                <b-col cols="auto" class="text-left">
                  <span style="font-size: 12px; color: white; font-weight: 700">{{item.artist.name}}</span>
                </b-col>
              </b-row>
			  <b-row align-h="left">
                <b-col cols="auto" class="text-left">
				  <router-link :to="{path: '/artist/'+item.artist.alias+'/album', query: {name: `${item.alias}`}}">
                  <span style="font-size: 12px; color: white; font-style: italic">{{item.name}}</span>
				  </router-link>
                </b-col>
              </b-row>
              <b-row align-h="left">
                <b-col cols="auto" class="text-left small" v-if="item.rating_amg">
                  <img
                    :src="`${item.rating_amg.img}`"
                    :title="item.rating_amg.rate"
                    style="width:75px;"
                  />
                </b-col>
				<b-col cols="auto" class="text-left small" v-else-if="item.rating_home">
                  <img
                    :src="`${item.rating_home.img}`"
                    :title="item.rating_home.rate"
                    style="width:75px;"
                  />
                </b-col>
				<b-col cols="auto" class="text-left small" v-else>
                </b-col>
              </b-row>			  
            </b-col>
          </span>
        </b-row>
      </div>
    </div>
    <br />
    <div class="box1" v-if="artist && album && song">
      <b-card-group deck style="color: #666666">
        <b-card
          title="英伦摇滚乐"
          :img-src="img_britpop"
          img-alt="Img"
          img-top
          v-on:click="routerTo_britpop"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"
          >Britpop（英伦摇滚或称英式摇滚），直接继承了上世纪80年代末90年代初英国独立音乐圈中的另类摇滚风格，乐队普遍受到The Smiths另类吉他的影响，他们汲取了朋克与新浪潮的简约与狂躁，后朋克的忧伤以及音乐科技革命所带来的迷离电子效果，并最终在90年代中期迸发了全球性的Britpop狂潮</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/britpop', query: {id: 'category', name: 'britpop'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_britpop}}艺人&nbsp;
              <br />
              {{num_album_britpop}}专辑&nbsp; {{num_review_britpop}}乐评&nbsp; {{num_song_britpop}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_britpop}}
            </small>
          </div>
        </b-card>  
        <b-card
          title="经典老摇滚"
          :img-src="img_classic"
          img-alt="Img"
          img-top
          v-on:click="routerTo_classic"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"          >上世纪进入60年代，以披头士和滚石为首的一班英国乐队开始活跃繁荣，将摇滚乐推向了高潮，并形成大众文化。他们还深刻影响了大洋彼岸的美国，掀起了嬉皮士运动，这次事件在现代音乐史上又被称为"英国入侵"，可以说这批英国经典乐队为后世的摇滚文化奠定了基础</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/classic', query: {id: 'category', name: 'classic'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_classic}}艺人&nbsp;
              <br />
              {{num_album_classic}}专辑&nbsp; {{num_review_classic}}乐评&nbsp; {{num_song_classic}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_classic}}
            </small>
          </div>
        </b-card>
		<b-card
          title="新生代独立音乐"
          :img-src="img_indie"
          img-alt="Img"
          img-top
          v-on:click="routerTo_indie"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"          >进入新千年后，随着Britpop时代的落幕以及网络媒体的强大宣传力，一批新兴独立乐队和歌手如雨后春笋般地冒出来并迅速走红。他们继承了前辈对音乐界带来的革新气质，在枝节繁茂包罗万象的当代独立音乐局面，继续闪耀着早年英国独立气息下的灵魂，并将自己的影响力通过互联网辐射到全世界</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/indie', query: {id: 'category', name: 'indie'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_indie}}艺人&nbsp;
              <br />
              {{num_album_indie}}专辑&nbsp; {{num_review_indie}}乐评&nbsp; {{num_song_indie}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_indie}}
            </small>
          </div>
        </b-card>		
      </b-card-group>
    </div>
    <br/>
    <div class="box1" v-if="artist && album && song">
      <b-card-group deck style="color: #666666">
        <b-card 
			title="英伦男声" 
			:img-src="img_male" 
			img-alt="Img" 
			img-top 
			v-on:click="routerTo_male"
		>
          <p class="card-text" style="font-size: 12px; text-align:justify">腐国乐坛的老男人和小鲜肉们</p>
          <b-button variant="primary">
            <router-link :to="{path: '/category/male', query: {id: 'category', name: 'male'}}">点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_male}}艺人&nbsp;
              <br />
              {{num_album_male}}专辑&nbsp; {{num_review_male}}乐评&nbsp; {{num_song_male}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_male}}
            </small>
          </div>
        </b-card>
		<b-card 
			title="英伦玫瑰" 
			:img-src="img_rose" 
			img-alt="Img" 
			img-top 
			v-on:click="routerTo_female"
		>
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"
          >从另类摇滚的PJ Harvey到温柔甜美的Dido，从磁性浑厚的阿黛尔到俏皮活泼的Lily Allen，从爵士范的Amy Winehouse到电音化的Beth Orton，多元化的英国女歌手风格，总有一款是你的爱</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/female', query: {id: 'category', name: 'female'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_female}}艺人&nbsp;
              <br />
              {{num_album_female}}专辑&nbsp; {{num_review_female}}乐评&nbsp; {{num_song_female}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_female}}
            </small>
          </div>
        </b-card>
	    <b-card
          title="英国电子乐"
          :img-src="img_electronic"
          img-alt="Img"
          img-top
          v-on:click="routerTo_electronic"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"
          >上世纪90年代，英国涌现了历时经年的电音狂潮，Trip Hop、Big Beat、Jungle、Drum & Bass、Acid Jazz等各类名词相继成为音乐"潮语"，电子乐迷可谓是目不暇给。阴郁的Trip-Hop有Portishead、Massive Attack、Tricky三驾马车，狂放的Big Beat领域也有The Prodigy、Fatboy Slim和The Chemical Brothers三大狂人</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/electronic', query: {id: 'category', name: 'electronic'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_electronic}}艺人&nbsp;
              <br />
              {{num_album_electronic}}专辑&nbsp; {{num_review_electronic}}乐评&nbsp; {{num_song_electronic}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_electronic}}
            </small>
          </div>
        </b-card>
	  </b-card-group>
    </div>
    <div class="box1" v-if="artist && album && song">
      <b-card-group deck style="color: #666666">
        <b-card
          title="自赏派音乐"
          :img-src="img_shoegaze"
          img-alt="Img"
          img-top
          v-on:click="routerTo_shoegaze"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"          >上世纪80年代末至90年代，英国出现了纯粹以吉他噪音实验为目标的乐队与风格，并且获得了相当大的成功，在英国独立摇滚中可谓独树一帜。由于乐手在表演时两眼直直地盯着地板不看别处，显得好象有点害羞，又似孤芳自赏，乐评人就将这一类音乐风格称为"自赏派"或"鞋盯派"（Shoegazing）</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/shoegaze', query: {id: 'category', name: 'shoegaze'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_shoegaze}}艺人&nbsp;
              <br />
              {{num_album_shoegaze}}专辑&nbsp; {{num_review_shoegaze}}乐评&nbsp; {{num_song_shoegaze}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_shoegaze}}
            </small>
          </div>
        </b-card>		
        <b-card
          title="苏格兰流行乐"
          :img-src="img_scotland"
          img-alt="Img"
          img-top
          v-on:click="routerTo_scotland"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"
          >以4AD传奇Cocteau Twins（极地双子星）、老牌另类乐团Teenage Fanclub、以及清新独立乐团Belle & Sebastian和Camera Obscura为代表的苏格兰独立流行乐是英国独立音乐的中坚力量之一，他们的作品机智甜美，永远充满活力，始终青春斑斓</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/scotland', query: {id: 'category', name: 'scotland'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_scotland}}艺人&nbsp;
              <br />
              {{num_album_scotland}}专辑&nbsp; {{num_review_scotland}}乐评&nbsp; {{num_song_scotland}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_scotland}}
            </small>
          </div>
        </b-card>
        <b-card
          title="爱尔兰流行乐"
          :img-src="img_ireland"
          img-alt="Img"
          img-top
          v-on:click="routerTo_ireland"
        >
          <p
            class="card-text"
            style="font-size: 12px; text-align:justify"
          >美丽的岛国爱尔兰，孕育了许多优秀的音乐人，从气质空灵的New Age代表Enya，到享誉世界的超级摇滚乐团U2，从另类创作型光头女歌手Sinead O'Connor，到成绩斐然的The Cranberries（小红莓），他们都纵横乐坛、星光熠熠</p>
          <b-button variant="primary">
            <router-link
              :to="{path: '/category/ireland', query: {id: 'category', name: 'ireland'}}"
            >点击进入</router-link>
          </b-button>
          <div slot="footer">
            <small class="text-muted">
              {{num_artist_ireland}}艺人&nbsp;
              <br />
              {{num_album_ireland}}专辑&nbsp; {{num_review_ireland}}乐评&nbsp; {{num_song_ireland}}推荐曲
              <br />
              最近添加&nbsp; {{last_artist_ireland}}
            </small>
          </div>
        </b-card>
      </b-card-group>
    </div>
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  //layout: "index",
  async asyncData(context) {
    //context.store.dispatch("showloader")
    let [request1Data, request2Data, request3Data, request4Data, request5Data] = await Promise.all([
      context.$axios.get('/api/artists-category/', { params: { showLoading: false } }),
      context.$axios.get('/api/albums-category/', { params: { showLoading: false } }),
      context.$axios.get('/api/songs-category/', { params: { showLoading: false } }),
      context.$axios.get('/api/albums-newreleased/', { params: { showLoading: false } }),
	  context.$axios.get('/api/news/', { params: { showLoading: false } }),
    ]).catch(err => {
      console.log(err);
    });
    return {
      artist: request1Data.data,
      album: request2Data.data,
      song: request3Data.data,
      num_artist_britpop: request1Data.data.num_artist_britpop,
      num_artist_scotland: request1Data.data.num_artist_scotland,
      num_artist_shoegaze: request1Data.data.num_artist_shoegaze,
      num_artist_ireland: request1Data.data.num_artist_ireland,
      num_artist_electronic: request1Data.data.num_artist_electronic,
      num_artist_classic: request1Data.data.num_artist_classic,
      num_artist_female: request1Data.data.num_artist_female,
      num_artist_male: request1Data.data.num_artist_male,
	  num_artist_indie: request1Data.data.num_artist_indie,
      num_album_britpop: request2Data.data.num_album_britpop,
      num_album_scotland: request2Data.data.num_album_scotland,
      num_album_shoegaze: request2Data.data.num_album_shoegaze,
      num_album_ireland: request2Data.data.num_album_ireland,
      num_album_electronic: request2Data.data.num_album_electronic,
      num_album_classic: request2Data.data.num_album_classic,
      num_album_female: request2Data.data.num_album_female,
      num_album_male: request2Data.data.num_album_male,
	  num_album_indie: request2Data.data.num_album_indie,
      num_review_britpop: request2Data.data.num_review_britpop,
      num_review_scotland: request2Data.data.num_review_scotland,
      num_review_shoegaze: request2Data.data.num_review_shoegaze,
      num_review_ireland: request2Data.data.num_review_ireland,
      num_review_electronic: request2Data.data.num_review_electronic,
      num_review_classic: request2Data.data.num_review_classic,
      num_review_female: request2Data.data.num_review_female,
      num_review_male: request2Data.data.num_review_male,
	  num_review_indie: request2Data.data.num_review_indie,
      num_song_britpop: request3Data.data.num_song_britpop,
      num_song_scotland: request3Data.data.num_song_scotland,
      num_song_shoegaze: request3Data.data.num_song_shoegaze,
      num_song_ireland: request3Data.data.num_song_ireland,
      num_song_electronic: request3Data.data.num_song_electronic,
      num_song_classic: request3Data.data.num_song_classic,
      num_song_female: request3Data.data.num_song_female,
      num_song_male: request3Data.data.num_song_male,
	  num_song_indie: request3Data.data.num_song_indie,
      last_artist_britpop: request1Data.data.last_artist_britpop,
      last_artist_scotland: request1Data.data.last_artist_scotland,
      last_artist_shoegaze: request1Data.data.last_artist_shoegaze,
      last_artist_ireland: request1Data.data.last_artist_ireland,
      last_artist_electronic: request1Data.data.last_artist_electronic,
      last_artist_classic: request1Data.data.last_artist_classic,
      last_artist_female: request1Data.data.last_artist_female,
      last_artist_male: request1Data.data.last_artist_male,
	  last_artist_indie: request1Data.data.last_artist_indie,
      num_artist: request1Data.data.num_artist,
      num_album: request2Data.data.num_album,
      num_review: request2Data.data.num_review,
      albumList: request4Data.data,
	  newsList: request5Data.data,
    };
  },
  head() {
    return {
      title: '英伦留声机',
    };
  },
  data() {
    return {
      //artist: '',
      //album: '',
      //song: '',
      slide: 0,
      sliding: null,
      //num_artist: 0,
      //num_album: 0,
      //num_review: 0,
      //num_artist_britpop: 0,
      //num_artist_scotland: 0,
      //num_artist_shoegaze: 0,
      //num_artist_ireland: 0,
      //num_artist_electronic: 0,
      //num_artist_classic: 0,
      //num_artist_female: 0,
      //num_artist_male: 0,
      //num_album_britpop: 0,
      //num_album_scotland: 0,
      //num_album_shoegaze: 0,
      //num_album_ireland: 0,
      //num_album_electronic: 0,
      //num_album_classic: 0,
      //num_album_female: 0,
      //num_album_male: 0,
      //num_song_britpop: 0,
      //num_song_scotland: 0,
      //num_song_shoegaze: 0,
      //num_song_ireland: 0,
      //num_song_electronic: 0,
      //num_song_classic: 0,
      //num_song_female: 0,
      //num_song_male: 0,
      //num_review_britpop: 0,
      //num_review_scotland: 0,
      //num_review_shoegaze: 0,
      //num_review_ireland: 0,
      //num_review_electronic: 0,
      //num_review_classic: 0,
      //num_review_female: 0,
      //num_review_male: 0,
      //last_artist_britpop: '',
      //last_artist_scotland: '',
      //last_artist_shoegaze: '',
      //last_artist_ireland: '',
      //last_artist_electronic: '',
      //last_artist_classic: '',
      //last_artist_female: '',
      //last_artist_male: '',
      img_britpop: require('@/assets/img/index/britpop.jpg'),
      img_scotland: require('@/assets/img/index/scotland.jpg'),
      img_shoegaze: require('@/assets/img/index/shoegaze.jpg'),
      img_ireland: require('@/assets/img/index/ireland.jpg'),
      img_electronic: require('@/assets/img/index/electronic.jpg'),
      img_classic: require('@/assets/img/index/classic.jpg'),
      img_rose: require('@/assets/img/index/rose.jpg'),
      img_male: require('@/assets/img/index/male.jpg'),
	  img_indie: require('@/assets/img/index/indie.jpg'),
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    this.$route.meta.title = '英伦留声机';
    document.title = this.$route.meta.title;
    //if (this.commentList) {
    //  this.$emit('refreshComment', this.commentList.length);
    //}
    //this.category_list_artists();
    //this.category_list_albums();
    //this.category_list_songs();
    //this.makeToast('secondary');
    this.$bvToast.show('welcome');
	this.$bvToast.show('news');
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    },
    routerTo_britpop: function() {
      this.$router.push({
        path: '/category/britpop',
      });
    },
    routerTo_scotland: function() {
      this.$router.push({
        path: '/category/scotland',
      });
    },
    routerTo_shoegaze: function() {
      this.$router.push({
        path: '/category/shoegaze',
      });
    },
    routerTo_ireland: function() {
      this.$router.push({
        path: '/category/ireland',
      });
    },
    routerTo_electronic: function() {
      this.$router.push({
        path: '/category/electronic',
      });
    },
    routerTo_classic: function() {
      this.$router.push({
        path: '/category/classic',
      });
    },
    routerTo_female: function() {
      this.$router.push({
        path: '/category/female',
      });
    },
    routerTo_male: function() {
      this.$router.push({
        path: '/category/male',
      });
    },
	routerTo_indie: function() {
      this.$router.push({
        path: '/category/indie',
      });
    },
    category_list_artists() {
      this.$axios
        .get('/api/artists-category/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_artist_britpop = res.num_artist_britpop;
          this.num_artist_scotland = res.num_artist_scotland;
          this.num_artist_shoegaze = res.num_artist_shoegaze;
          this.num_artist_ireland = res.num_artist_ireland;
          this.num_artist_electronic = res.num_artist_electronic;
          this.num_artist_classic = res.num_artist_classic;
          this.num_artist_female = res.num_artist_female;
          this.num_artist_male = res.num_artist_male;
		  this.num_artist_indie = res.num_artist_indie;
          this.last_artist_britpop = res.last_artist_britpop;
          this.last_artist_scotland = res.last_artist_scotland;
          this.last_artist_shoegaze = res.last_artist_shoegaze;
          this.last_artist_ireland = res.last_artist_ireland;
          this.last_artist_electronic = res.last_artist_electronic;
          this.last_artist_classic = res.last_artist_classic;
          this.last_artist_female = res.last_artist_female;
          this.last_artist_male = res.last_artist_male;
		  this.last_artist_indie = res.last_artist_indie;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    category_list_albums() {
      this.$axios
        .get('/api/albums-category/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_album_britpop = res.num_album_britpop;
          this.num_album_scotland = res.num_album_scotland;
          this.num_album_shoegaze = res.num_album_shoegaze;
          this.num_album_ireland = res.num_album_ireland;
          this.num_album_electronic = res.num_album_electronic;
          this.num_album_classic = res.num_album_classic;
          this.num_album_female = res.num_album_female;
          this.num_album_male = res.num_album_male;
		  this.num_album_indie = res.num_album_indie;
          this.num_review_britpop = res.num_review_britpop;
          this.num_review_scotland = res.num_review_scotland;
          this.num_review_shoegaze = res.num_review_shoegaze;
          this.num_review_ireland = res.num_review_ireland;
          this.num_review_electronic = res.num_review_electronic;
          this.num_review_classic = res.num_review_classic;
          this.num_review_female = res.num_review_female;
          this.num_album_male_male = res.num_review_male;
		  this.num_album_male_indie = res.num_review_indie;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    category_list_songs() {
      this.$axios
        .get('/api/songs-category/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_song_britpop = res.num_song_britpop;
          this.num_song_scotland = res.num_song_scotland;
          this.num_song_shoegaze = res.num_song_shoegaze;
          this.num_song_ireland = res.num_song_ireland;
          this.num_song_electronic = res.num_song_electronic;
          this.num_song_classic = res.num_song_classic;
          this.num_song_female = res.num_song_female;
          this.num_song_male = res.num_song_male;
		  this.num_song_indie = res.num_song_indie;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    showNews() {
      this.$axios
        .get('/api/news/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.newsList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },	
    makeToast(variant = null) {
      this.$bvToast.toast('', {
        title: '英伦留声机',
        variant: 'secondary',
        toaster: 'b-toaster-top-center',
        solid: true,
      });
    },
  },
};
</script>


<style scoped>
h4.card-title {
  font-family: Segoe UI, Microsoft Yahei, Verdana, Helvetica Neue, Tahoma, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
}

h5 {
  text-shadow: 2px 2px 8px #00fa9a;
}

.card {
  -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
  animation: mymove 5s infinite;
  -webkit-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  50% {
    box-shadow: 6px 12px 24px #aaaaaa;
  }
}

/* Standard syntax */
@keyframes mymove {
  50% {
    box-shadow: 6px 12px 24px #aaaaaa;
  }
}

.card:hover {
  -webkit-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate(-5px, -5px);
  -ms-transform: translate(-5px, -5px);
  -o-transform: translate(-5px, -5px);
  transform: translate(-5px, -5px);
}

/* 
.card:hover img{
     -webkit-filter: sepia(75%); 
	 filter: sepia(75%);
}
*/

.mask {
  background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  -webkit-transform: skewx(-5deg);
  -webkit-transition: all 5s;
  width: 50%;
  height: 100%;
  position: absolute;
  left: 10px;
  top: 0;
}

.card:hover .mask {
  left: 110px;
}

.card {
  overflow: hidden;
}

img.card-img-top {
  transition: all 1.5s; /*图片放大过程的时间*/
}

img.card-img-top:hover {
  cursor: crosshair;
  transform: scale(1.12); /*以y轴为中心旋转*/
}

.content_album_new {
  padding: 10px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 5px outset grey;
  border-radius: 5px;
}

.content_album_new .row {
  padding: 0px;
  margin: 0px;
}

.placeholder108 {
    width: 108px;
    height: 108px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_148x148.png);
}

</style>

<!--<style src="../assets/css/global.css"></style>
<!--<style src="../assets/css/link.css"></style>
<!--<style src="../assets/css/font.css"></style>


